// 专区管理子组件 编辑与添加共用弹框
import React, { useState, useEffect } from 'react';
import { Button, Modal, message, InputNumber, Form, Input, Switch, Select, DatePicker } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import '../../../css/AddorRev.css'
import dayjs from 'dayjs'
import { addZone, revZone } from '../../../../api/opreationApi'
import getSelectTime from '../../../../utils/date'
// 表格接口
interface DataType {
  key: React.Key;
  tsaId: number;//专区表主键
  tsaName: string;//专区名称
  tsaTime: string;//上架时间
  tsaUptimeEnd: string;//结束时间
  tsaUptimeStart: string;//开始时间
  tsaLocation: number;//位置
  tsaArrange: string;//模板
  tsaUpordown: number;//是否上架
}

// 参数接口
interface PropsType {
  modalClose(): void,
  isModalOpen: boolean,
  head: string | null,
  nowRev: DataType | null
  getData(): void
}

export default function AddorRev(props: PropsType) {
  const [imageUrl, setImageUrl] = useState<string>();  //放选中图片的地址
  const [form] = Form.useForm();
  const [change, setChange] = useState<boolean>()

  // 初始化
  useEffect(() => {
    //去修改form表单里面的默认值
    if (props.head === '添加') {
      form.setFieldsValue({
        tsaTime: null,
        timeQuantum: null,
        tsaArrange: null,
        tsaName: null,
        tsaLocation: null,
        tsaUpordown: null
      })
    } else {
      form.setFieldsValue({
        tsaName: props.nowRev?.tsaName,
        tsaLocation: props.nowRev?.tsaLocation,
        tsaArrange: props.nowRev?.tsaArrange,
        tsaTime: dayjs(props.nowRev?.tsaTime),
        timeQuantum: [dayjs(props.nowRev?.tsaUptimeStart), dayjs(props.nowRev?.tsaUptimeEnd)],
        tsaUpordown: props.nowRev?.tsaUpordown
      })
    }
  }, [props])

  // 对话框部分
  const handleOk = () => {
    props.modalClose()
  };

  const handleCancel = () => {
    props.modalClose()
  };
  // 表单部分
  const onFinish = (values: any) => {
    console.log();

    const data = {
      tsaUptimeStart: getSelectTime(values.timeQuantum[0]),
      tsaUptimeEnd: getSelectTime(values.timeQuantum[1]),
      tsaArrange: values.tsaArrange,
      tsaUpordown: values.tsaUpordown === true ? 1 : 0,
      tsaLocation: values.tsaLocation,
      tsaName: values.tsaName,
      tsaTime: getSelectTime(values.tsaTime)
    }
    if (props.head === '添加') {
      addZone(data).then(res => {
        props.getData()
        message.success('添加成功！')
      })
    } else {
      revZone({ ...data, tsaId: props.nowRev?.tsaId }).then(res => {
        props.getData()
        message.success('修改成功！')
      })
    }
    props.modalClose()
  };

  // 开关按钮
  const onChangeSwitch = (checked: boolean) => {
    console.log(`switch to ${checked}`);
    setChange(checked)
  };

  // 时间段选择
  const { RangePicker } = DatePicker;


  // 预设上架时间选择
  const onChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };

  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
  };

  // 选择显示模板
  const handleChange = (value: string) => {

  }

  return (
    <>
      <Modal title={props.head} open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          {/* 标题 */}
          <Form.Item
            label="专区名称"
            name="tsaName"
            rules={[{ required: true, message: '请输入轮播标题！' }]}
            initialValue={props.nowRev?.tsaName}
          >
            <Input placeholder="请输入轮播标题！" />
          </Form.Item>
          {/* 位置 */}
          <Form.Item
            label="位置"
            name="tsaLocation"
            rules={[{ required: true, message: '请输入位置！' }]}
            initialValue={props.nowRev?.tsaLocation}
          >
            <InputNumber placeholder="请输入位置！" />
          </Form.Item>
          {/* 显示模板 */}
          <Form.Item
            label='显示模板'
            name='tsaArrange'
            rules={[{ required: true, message: '请选择类型！' }]}
            initialValue={props.nowRev?.tsaArrange}
          >
            <Select
              onChange={handleChange}
              style={{ width: 120 }}
              allowClear
              options={[{ value: '单排', label: '单排' }, { value: '单列', label: '单列' }, { value: '双排双列', label: '双排双列' }]}
              className='drop'
              placeholder="请选择显示模板！"
            />
          </Form.Item>
          {/* 上架时间段 */}
          <Form.Item
            name='timeQuantum'
            label="上架时间段"
            initialValue={props.nowRev?.tsaUptimeStart}
          >
            <RangePicker showTime />
          </Form.Item>
          {/* 预设上架时间 */}
          <Form.Item
            name='tsaTime'
            label="预设上架时间"
            labelAlign='right'
            initialValue={props.nowRev?.tsaTime}
          >
            <DatePicker showTime onChange={onChange} onOk={onOk} />
          </Form.Item>
          {/* 是否上架开关 */}
          <Form.Item
            name='tsaUpordown'
            label="上架"
            valuePropName='checked'
            initialValue={props.nowRev?.tsaUpordown}
          >
            <Switch onChange={onChangeSwitch} />
          </Form.Item>
          {/* 操作按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>
            <Button type="primary" htmlType="submit" className='submit'>提交</Button>
            <Button type="primary" onClick={handleCancel} className='cancel'>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
